<template>
	<!-- <view> calendar-->
	<view class="">
		<view class="time">
			<view>
				<text class="t_blue">{{year}}</text>年
				<text class="t_blue">{{month}}</text>月
				<text class="t_blue">{{date}}</text>日
			</view>
		</view>

		<view class="weekName">
			<view>日</view>
			<view class="monday">一</view>
			<view class="tuesday">二</view>
			<view class="wednesday">三</view>
			<view class="thursday">四</view>
			<view class="friday">五</view>
			<view>六</view>
		</view>

		<view class="week">
			<!-- 填补空格-->
			<view v-for="(item,index) in nbsp" :key="index" style="color:#fff;">空</view>
			<!-- 已过日期 + 已签到日期-->
			<view v-for="(item,index) in date-1" :key="index">
				<text v-if="item+1==calendarSignData[item+1]" style="color:#80c9c7;">{{item+1}}
				</text>
				<text v-else>{{item+1}}</text>
			</view>
			<!-- 已签到日期 || 今日-->
			<view>
				<text v-if="date==calendarSignData[date]" style="color:#80c9c7;">{{date}}
					<!-- <text class="">1</text> -->
				</text>
				<text v-else style="color:#80c9c7;">{{date}}
					<!-- <text class="iconfont icon-weiqiandao">1</text> -->
				</text>
			</view>
			<!-- 日期-->
			<view v-for="(item,index) in monthDaySize-date" :key="index">{{item+date+1}}</view>
		</view>
	</view>
	<!-- </view> -->
</template>

<script>
	export default {
		name: 'shoppingCart',
		props: {

		},
		data() {
			return {
				year: '',
				month: '',
				nbsp: '',
				date: '',
				monthDaySize: '',
				calendarSignData: '',
			};
		},
		created() {
			this.init();
		},
		methods: {
			//初始化
			init() {
				let mydate = new Date(); //本地时间
				let year = mydate.getFullYear(); //年
				let month = mydate.getMonth() + 1; //月
				let date = mydate.getDate(); //今日
				let day = mydate.getDay(); //天
				let nbsp = 7 - ((date - day) % 7); //空格
				let monthDaySize; //天数
				if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
					monthDaySize = 31;
				} else if (month == 4 || month == 6 || month == 9 || month == 11) {
					monthDaySize = 30;
				} else if (month == 2) { //计算是否是闰年,如果是二月份则是29天
					if ((year - 2000) % 4 == 0) {
						monthDaySize = 29;
					} else {
						monthDaySize = 28;
					}
				};
				console.log(mydate)
				this.year = year;
				this.month = month;
				this.nbsp = nbsp;
				this.date = date;
				this.monthDaySize = monthDaySize;
			},
		}
	}
</script>

<style lang="scss">
	.calendar {
		margin: 0 4vw;
		padding-bottom: 10rpx;
		border-radius: 15rpx;
		background-color: #fff;
	}

	.time {
		display: flex;
		align-items: center;
		padding: 20rpx 20rpx 0 20rpx;
		text-align: center;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		background-color: #fff;
	}

	.time view {
		flex: 1;
		font-size: 38rpx;
		font-weight: bold;
		color: #80c9c7;
	}

	.weekName {
		display: flex;
		font-size: 30rpx;
		padding: 16rpx 0;
		margin: 15rpx 15rpx 0 15rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		background-color: #80c9c7;
	}

	.weekName view {
		flex: 1;
		text-align: center;
		color: #fff;
	}

	.week {
		margin: 0 15rpx 15rpx 15rpx;
		font-size: 30rpx;
	}

	.week view {
		width: 14.2%;
		height: 70rpx;
		line-height: 70rpx;
		display: inline-block;
		margin: 10rpx 0;
		text-align: center;
	}

	.week view text {
		width: 100%;
		height: 100%;
		display: inline-block;
		font-family: '微软雅黑';
	}
	.calendarSign {
		margin: 20rpx;
	}
</style>
